<template>
  <div v-if="list.length > 0">
    <div class="show" v-for="item in commodityName" :key="item.id">
      <div class="showImg">
        <img :src="item.imgprefix + item.imgbase" @click="onClick(item)" />
      </div>
      <div class="showWriting">
        <div class="showWriting-1">
          <!-- 一加 Buds 3 真无线降噪蓝牙耳机 入耳式音乐运动电竞游戏耳机 通用oppo小米苹果华为手机 深空灰 -->
          {{ item.name }}
        </div>
        <div class="showWriting-2">
          <div class="showWriting-2-1">￥</div>
          <em>{{ item.oriprice.slice(0, -3) }}</em>
          <div>{{ item.oriprice.slice(-3) }}</div>
        </div>
        <div class="showWriting-3">
          <img
            class="showWriting-3-img"
            src="https://img12.360buyimg.com/img/s48x28_jfs/t1/127567/8/7519/1313/5f165ca9Ea295fca1/b90967cc602f446a.png"
          />
          <div class="showWriting-3-comments">{{ a(item.id) }}</div>
          <div class="showWriting-3-similar">看相似</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getFilmList } from '@/api'
import router from '@/router'

//点击跳商品详情
function onClick(item: CommodityName) {
  // console.log(item)
  router.push(`/detail/id=${item.id}`)
}

// 商品列表数据
const list = ref<IFilmList[]>([])

// 商品名称
const commodityName = ref<CommodityName[]>([])
const a = (id: string) => {
  const aaa = commodityName.value.map((item) => {
    const b = { arr: item.ext.icon, id: item.id }
    return b
  })
  // console.log(id)

  const bbb = aaa.filter((v) => +v.id === +id)
  // console.log(bbb)
  if ((bbb[0].arr.length = 1)) {
    //@ts-ignore
    return bbb[0].arr[0].txt1
  }
  if ((bbb[0].arr.length = 2)) {
    // console.log(bbb)
    return bbb[0].arr[1].txt1
  }
  return
}
// 加载函数
async function onLoad() {
  // 调用接口
  const { feeds } = await getFilmList()
  // 赋值
  list.value = [feeds]
  commodityName.value = feeds.content

  // console.log(commodityName.value)
}
onLoad()
</script>

<style scoped>
.show {
  width: 176px;
  height: 280px;
  background-color: #fff;
  box-sizing: border-box;
  float: left;
  margin: 10px 5px 0;
  border-radius: 7px;
  overflow: hidden;
}
.show .showImg img {
  width: 176px;
  height: 176px;
  border-radius: 5px 5px 0 0;
}
.showWriting {
  width: 152px;
  height: 92px;
  margin-left: 10px;
}
.showWriting-1 {
  line-height: 20px;
  height: 42px;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
.showWriting-2 {
  width: 100%;
  height: 30px;
  float: left;
  display: flex;
  font-style: normal;
  color: #ff4142;
  line-height: 36px;
  font-size: 14px;
}
.showWriting-2 em {
  font-style: normal;
  font-size: 20px;
  line-height: 30px;
}
.showWriting-3 {
  width: 100%;
  height: 20px;
  float: left;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}
.showWriting-3-img {
  margin-top: 3px;
  width: 24px;
  height: 14px;
}
.showWriting-3-comments {
  font-size: 12px;
  color: #999;
}
.showWriting-3-similar {
  font-size: 11px;
  background: #f2f2f2;
  color: #262626;
  border-radius: 10px;
  width: 50px;
  text-align: center;
}
</style>
